<template>
	<view class="padding-sm">
		<view class="juzhong margin-top-xl" style="display: block">
			<view class="font-content">账户余额（元）</view>
			<view style="font-size: 50rpx;font-weight: bold;" class="margin-top-sm font-title">0</view>
			<view class="font-red margin-top-sm" @click="go('/pages/mine/order/orderRecord/orderRecord')">充值记录</view>
		</view>

		<view>

			<uni-section title="储值金额" type="line" class="padding-xs">
				<uni-grid :showBorder="false" :column="3" @change="onClick">
					<uni-grid-item v-for="(item,index) in list" :index="index" :key="index">
						<view class="juzhong" style="display: block;">
							<view class="radius padding-xs margin-xs  "
								:class="{'bg-red':index==selectIndex,'bg-gray':index!=selectIndex}"
								style="font-size: 40rpx;font-weight: bold;display: block;height: 150rpx;">
								<view>{{item.price}}</view>
								<view style="font-size: 24rpx;font-weight: 300;text-decoration:line-through"
									v-if="item.originalPrice>0">
									原价{{item.originalPrice}}</view>
								<view style="font-size: 24rpx;font-weight: 300;" v-if="item.give>0">赠送{{item.give}}
								</view>
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="null" :key="null">
						<view class="radius padding-sm margin-xs bg-gray juzhong"
							style="font-size: 30rpx;font-weight: bold;height: 100%;height: 150rpx;">
							<input placeholder="自定义金额" style="font-size: 30rpx;" />
						</view>
					</uni-grid-item>
				</uni-grid>

				<view>

				</view>
			</uni-section>
		</view>


		<uni-section title="储值协议" type="line" class="padding-xs">
			<view style="padding:0px 20rpx 20rpx 20rpx;  word-break: break-all;" class="font-content">
				1、充值后不可退款<br>
				1、充值后不可退款<br>
				1、充值后不可退款<br>
				1、充值后不可退款<br>
				1、充值后不可退款
			</view>
		</uni-section>
		<view style="width: 710rpx;position: fixed;bottom: 10px;" class="">
			<button @click="addCommunication" class="login-btn cu-btn block bg-red lg round ">
				确认充值
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					price: 100,
					give: 0,
					originalPrice: 120,
				}, {
					price: 200,
					give: 30,
					originalPrice: 0,
				}, {
					price: 300,
					give: 50,
					originalPrice: 420,
				}, {
					price: 400,
					give: 0,
					originalPrice: 720,
				}],
				selectIndex: 0,
			}
		},
		methods: {
			onClick(e) {
				let {
					index
				} = e.detail
				console.log(index);
				this.selectIndex = e.detail.index
				this.$forceUpdate()
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>